// Markdown styling is based on https://gist.github.com/tuzz/3331384.
@import 'vars';
@import 'functions';
@import 'prism-theme';

.page__content {
  line-height:1.5em;

  h1 { font-size: getFontSize(4); }
  h2 { font-size: getFontSize(3); }
  h3 { font-size: getFontSize(2); }
  h4 { font-size: getFontSize(1); }
  h5 { font-size: getFontSize(0); }
  h6 { font-size: getFontSize(-1); }

  h1, h2, h3, h4, h5, h6 {
    font-family: $font-stack-heading;
    font-weight:600;
    line-height:1.4;
    margin:1.5em 0 0.25em;
    color:getColor(fiord);

    &:first-child {
      margin-top: 0;
      line-height: 1;
    }

    tt, code { font-size: 90%; color: inherit }
  }

  p, blockquote, table, pre {
    margin:1em 0;
  }

  ul, ol, dl {
    margin:0.5em 0 1em;
  }

  li {
    margin:0.5em 0;
  }

  hr {
    border:none;
    background-color:getColor(alto);
    height:3px;
    margin:2em 0;
  }

  ul, ol {
    padding-left: 30px;

    &:first-child { margin-top:0; }
    &:last-child { margin-bottom:0; }
  }

  dl {
    dt {
      font-size: getFontSize(0);
      font-weight: bold;
      font-style: italic;
      margin: 15px 0 5px;

      &:first-child { padding: 0; }
    }

    dd {
      margin: 0 0 15px;
      padding: 0 15px;
    }

    dt, dd {
      > :first-child { margin-top: 0; }
      > :last-child { margin-bottom: 0; }
    }
  }

  blockquote {
    border-left: 4px solid #dddddd;
    padding:0.75em 1em;
    color:getColor(dove-grey);

    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }

    &.tip,
    &.warning,
    &.todo {
      border-left:none;
      border-radius: 3px;

      .tip-content {
        font-style: italic;
      }

      code {
        color: inherit;
      }
    }

    &.tip {
      background-color: #DCF2FD;
      color: #618ca0;
    }

    &.warning {
      background-color: #fbedb7;
      color: #8c8466;
    }

    &.todo {
      background-color: #fbddcd;
      color: #907a6e;

      .tip-content::before {
        content: '[TODO]: ';
        font-style: normal;
      }
    }
  }

  .table {
    margin: 1em 0;

    @include break {
      overflow-x: auto;
      overflow-y: hidden;
    }

    &-wrap {
      display: block;
      width: 100%;

      @include break {
        display: table;
        border-left: 1px solid #cccccc;
        border-bottom: 1px solid #cccccc;
      }
    }

    &-tr {
      background-color: white;
      margin: 0;
      padding: 0.25em 0;
      display: block;
      border: 1px solid #cccccc;
      border-bottom: none;

      @include break {
        border: none;
        padding: 0;
        display: table-row;
      }

      &:nth-child(2n) {
        background-color: #f8f8f8;
      }

      &:last-child {
        border-bottom: 1px solid #cccccc;
      }
    }

    &-th {
      font-weight: bold;
      border-bottom: none;
      text-align: left;
      margin: 0;
      padding: 6px 12px;
      background: darken(#F4F6F6, 1%);
    }

    &-td {
      text-align: left;
      margin: 0;
      padding: 4px 12px;

      img {
        max-width:none;
      }

      &-title {
        display: block;
        width: 40%;

        @include break {
          display: none;
          width: auto;
        }
      }

      &-content {
        display: block;
        width: 60%;

        code {
          white-space: normal;
          word-break: break-word;
        }

        @include break {
          width: auto;

          code {
            word-break: normal;
            white-space: nowrap;
          }
        }
      }
    }

    &-th,
    &-td {
      display: flex;
      flex-basis: 100%;
      align-self: stretch;

      @include break {
        border-top: 1px solid #cccccc;
        border-right: 1px solid #cccccc;
        display: table-cell;
      }
    }

    &-header {
      display: none;

      .table-tr {
        border-bottom: none;
      }

      @include break {
        display: table-header-group;
      }
    }

    &-body {
      @include break {
        display: table-row-group;
      }
    }
  }

  img:not([class*="support__"]) {
    max-width: 100%;
    height: auto;
  }

  b, strong {
    font-weight:600;
  }

  i, em {
    font-style: italic;
  }

  code, tt {
    font-family: $font-stack-code;
    font-size: 90%;
    margin: 0 2px;
    padding: 2px 6px;
    white-space: normal;
    background-color: transparentize(getColor(fiord), 0.94);
    border-radius: 3px;
    text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
  }

  a code {
    color: $text-color-highlight;
  }

  pre {
    background-color: rgba(238, 238, 238, 0.35);
    background-color: getColor(elephant);
    font-size: 13px;
    line-height: 19px;
    overflow: auto;
    padding: 8px 16px;
    border-radius: 3px;

    code {
      margin: 0;
      padding: 0;
      white-space: pre;
      border: none;
      background: transparent;
      text-shadow: 0 1px 0 transparentize(darken(getColor(elephant), 10%), 0.5);
      color: desaturate(getColor(malibu), 40%);

      .code-details-summary-span {
        margin-left: -15px;
        cursor: pointer;
      }

      a {
        border-bottom: 1px dotted getColor(denim);
      }

      .code-link {
        position: relative;

        &:hover {
          color: lighten(getColor(denim), 15%);
        }
      }
    }

    code, tt {
      background-color: transparent;
      border: none;
    }
  }

  p {
    code, tt {
      max-width: 100%;
      line-height: initial;
      overflow: auto;
      margin: 0;
      vertical-align: middle;
      white-space: normal;
    }
  }

  span {
    code, tt {
      white-space: pre-line;
    }
  }
}
